<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <script src="js/vue.js"></script>
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }
        .search-box {
            height: 48px;
        }
        .input-group-addon {
            background-color:#E94F4C;
            border: none;
            color: #ffffff;
        }
        .control-icon {
            position: absolute;
            top: 50%;
        }
        .mgt38 {
            margin-top: 30px;
        }
        .thumbnail a img {
            height: 200px;
            width: 200px;
        }
        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }
        a:hover {
            text-decoration: none;
        }
        h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
            <p class="navbar-text navbar-right login-text">
                <a id="loginText" href="login.html">登录</a>
            </p>
            <p class="navbar-text navbar-right">
                <a href="register.html">注册</a>
            </p>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-xs-1 search-box">
                <a href="#" class="logo">
                    <i class="fa fa-sign-language"></i>
                </a>
            </div>
            <div class="col-xs-9 search-box">
                <div class="input-group search-box">
                    <input class="form-control search-box">
                    <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
            </div>
            <div class="col-xs-2 search-box">
                <a href="购物车页面.html" class="btn btn-danger btn-block search-box">
                    <i class="fa fa-cart-arrow-down" style="font-size: 20px;"></i>&nbsp;&nbsp;购物车
                    <!-- 购物车数据的数量 -->
                    <span id="shoppingCartNum" class="badge">0</span>
                </a>
            </div>
        </div>
        <div class="row">
            <div id="carousel-example" class="carousel slide mgt38" data-ride="carousel">
                <!-- 小圆点 -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                    <li data-target="#carousel-example" data-slide-to="4"></li>
                </ol>

                <!-- 放置图片 -->
                <div class="carousel-inner">

                    <!-- 展示每张图片以及文字 -->
                    <div class="item active">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                </div>

                <!-- 左边的箭头 -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="fa fa-chevron-left control-icon"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <!-- 右边的箭头 -->
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="fa fa-chevron-right control-icon"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="row mgt38" id="goodsListInfo">
            <div class="col-xs-3" v-for="good in goodList">
                <div class="thumbnail">
                    <a href="javascript: void(0);">
                        <img :src="good.smallPic">
                        <div class="caption">
                            <p class="description">
                                {{good.title}}
                            </p>
                            <p>
                                价格：￥{{good.price}}
                            </p>
                            <p>
                                <button :id="good.goodsId" onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车
                                </button>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#goodsListInfo',
        data: {
            goodList: []
        }
    });

    //登录验证
    $(function () {
        $.ajax({
            url: 'http://localhost:8080/loginJudge',
            type: 'get',
            dataType: 'json',
            data: {
                method:"login"
            },
            success: function (_data) {
                // 如果用户登录
                code = _data.code;
                // vm2.username = _data.username;
                if (code == 2) {
                    $('#login').css('display', 'none')
                    $('#dropdown').css('display', 'block')
                }
            }
        })
    });

    //退出登录
    function quit() {
        $.ajax({
            url: 'http://localhost:8080/loginJudge',
            type: 'get',
            dataType: 'json',
            data: {
                method: "quit"
            }
        });
        localStorage.removeItem('local_shopping_cart');
        location.reload();
    }


    //获取数据库商品列表
    $.ajax({
        url: 'http://localhost:8080/query',
        type: 'post',
        dataType: 'json',
        success: function (_data) {
            console.log(_data);
            renderGoodsInfo(_data);
        }
    });

    //json转数组
    function renderGoodsInfo(goods) {
        for (var i = 0; i < goods.length; i++) {
            vm.goodList.push(goods[i]);
        }
    }

    //加入购物车
    function addToShoppingCart(btnTag) {
        //获取商品ID
        var goodsId = $(btnTag).prop('id');
        if (code == 2) {
            $.ajax({
                url: 'http://localhost:8080/insert'+goodsId,
                type: 'post',
                dataType: 'json',
            })
            shoppingCart2LocalStorage(goodsId);
        }else {
            shoppingCart2LocalStorage(goodsId);
            console.log(goodsId)
        }
    }


    // 购物车数据的本地存储LI
    function shoppingCart2LocalStorage(goodsId) {
        //取得已经存在于本地的购物车数据, 取出的数据也是一个字符串
        var shoppingCart = localStorage.getItem('local_shopping_cart');
        goodsId = '' + goodsId; //将goodId转换为字符串
        //表示本地没有数据
        if (!shoppingCart) {
            shoppingCart = {}; // 重新复制
            shoppingCart[goodsId] = 1;
            $('#shoppingCartNum').html(1); // 小圆点的数字
            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart));
        } else {
            //将字符串转换为js的对象
            shoppingCart = JSON.parse(shoppingCart);
            //返回一个数组，数组中就是所有的商品的id ['1001', '1002', '1003']
            var goodIds = Object.keys(shoppingCart);
            //判断商品是否已经存在
            if (goodIds.indexOf(goodsId) != -1) {
                //存在数量 +1
                shoppingCart[goodsId]++;
            } else {
                //不存在新增1商品
                shoppingCart[goodsId] = 1;
            }
            //购物车计数变化
            countShoppingCartNum(shoppingCart);
            //本地存储新的购物车信息
            localStorage.setItem('local_shopping_cart', JSON.stringify(shoppingCart));
        }
    }

    //购物车初始化
    countShoppingCartNum(JSON.parse(localStorage.getItem('local_shopping_cart')));

    //购物车数据加载
    function countShoppingCartNum(localShoppingCart) {
        //判断购物车是否存在数据
        if (localShoppingCart) {
            console.log(localShoppingCart);
            //获取商品ID数组
            var goodIds = Object.keys(localShoppingCart);
            var num = 0;
            //遍历商品id，根据id回去购物车对应商品的数量，累加进num
            for (var i = 0; i < goodIds.length; i++) {
                num += localShoppingCart[goodIds[i]];
            }
            //购物车按钮小圆点显示
            $('#shoppingCartNum').html(num);
        }
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }
</script>
</html>